<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>客户管理</el-breadcrumb-item>
                <el-breadcrumb-item>会员管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="userFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="userFormData.username" placeholder="请输入客户账号"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="userFormData.phone" placeholder="请输入客户联系方式"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="userFormData.level" clearable placeholder="请选择会员等级">
                        <el-option
                                v-for="item in selectData"
                                :key="item.levelId"
                                :label="item.levelName"
                                :value="item.levelId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="userFormData.email" placeholder="请输入客户邮箱"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getAllClient()">查询</el-button>
                    <el-button type="primary" @click="insertClient()">添加客户</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="客户ID">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="客户账号">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="客户状态">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949"
                                    @change="changeStaus(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="sex"
                            label="客户性别">
                        <template slot-scope="scope">
                            <span v-if="scope.row.sex==0">女</span>
                            <span v-if="scope.row.sex==1">男</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="客户联系方式"
                            width="120px">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="客户地址">
                    </el-table-column>
                    <el-table-column
                            prop="growth"
                            label="成长值">
                    </el-table-column>
                    <el-table-column
                            prop="level"
                            label="会员等级"
                            >
                        <template slot-scope="scope" >
                            <span v-for="item in selectData" v-if="scope.row.level==item.levelId">{{item.levelName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="accountBalance"
                            label="账户余额">
                    </el-table-column>
                    <el-table-column
                            prop="integration"
                            label="客户积分">
                    </el-table-column>
                    <el-table-column
                            prop="cardNumber"
                            label="身份证号">
                    </el-table-column>
                    <el-table-column
                            prop="idType"
                            label="证件类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.idType==1">身份证</span>
                            <span v-if="scope.row.idType==2">护照</span>
                            <span v-if="scope.row.idType==3">台胞证</span>
                            <span v-if="scope.row.idType==4">港澳台开往内地通行证</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="frontPhoto"
                            label="正面证件照"
                            width="100px">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="50" :src="scope.row.frontPhoto"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="reversePhoto"
                            label="反面证件照"
                            width="100px">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="50" :src="scope.row.reversePhoto"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="licenseFrontPhoto"
                            label="驾照主页照片"
                            width="115px">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="50" :src="scope.row.licenseFrontPhoto"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="licenseReversePhoto"
                            label="驾照副页照片"
                            width="115px">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="50" :src="scope.row.licenseReversePhoto"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="headPic"
                            label="客户头像">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="50" :src="scope.row.headPic"></el-avatar>
                        </template>
                    </el-table-column>
                </el-table>

                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageUtil.currentPage"
                        :page-sizes="[5,10,15,20]"
                        :page-size="pageUtil.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>

            <el-dialog
                    title="客户信息"
                    :visible.sync="dialogVisible"
                    width="30%">
                <span>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                        <el-input v-model="ruleForm.id" readonly="readonly" type="hidden"></el-input>

                      <el-form-item label="客户账号" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                      </el-form-item>
                        <el-form-item label="客户密码" prop="password">
                        <el-input v-model="ruleForm.password"></el-input>
                      </el-form-item>
                        <el-form-item label="证件类型" prop="idType">
                        <el-select v-model="ruleForm.idType" clearable placeholder="请选择证件类型">
                            <el-option
                                    v-for="item in option"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                      </el-form-item>
                        <el-form-item label="身份证号" prop="cardNumber">
                        <el-input v-model="ruleForm.cardNumber"></el-input>
                      </el-form-item>
                        <el-form-item label="客户电话" prop="phone">
                        <el-input v-model.number="ruleForm.phone"></el-input>
                      </el-form-item>
                        <el-form-item label="客户地址" prop="address">
                        <template>
                              <div id="app">
                                <el-cascader
                                        size="large"
                                        :options="options"
                                        v-model="selectedOptions">
                                </el-cascader>
                              </div>
                            </template>
                      </el-form-item>
                        <el-form-item label="证件正面照片">
                        <el-upload
                                class="avatar-uploader"
                                action="http://192.168.0.100:80/clms-client/client/upload"
                                :headers= "headers"
                                :show-file-list="false"
                                :on-success="uploadFrontPhoto"
                                :before-upload="beforeAvatarUpload">
                           <img v-if="frontPhoto" :src="frontPhoto" class="avatar">
                           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </el-form-item>
                        <el-form-item label="证件反面照片">
                        <el-upload
                                class="avatar-uploader"
                                action="http://192.168.0.100:80/clms-client/client/upload"
                                :headers= "headers"
                                :show-file-list="false"
                                :on-success="uploadReversePhoto"
                                :before-upload="beforeAvatarUpload">
                           <img v-if="reversePhoto" :src="reversePhoto" class="avatar">
                           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </el-form-item>
                        <el-form-item label="驾照主页照片">
                        <el-upload
                                class="avatar-uploader"
                                action="http://192.168.0.100:80/clms-client/client/upload"
                                :headers= "headers"
                                :show-file-list="false"
                                :on-success="uploadLicenseFrontPhoto"
                                :before-upload="beforeAvatarUpload">
                           <img v-if="licenseFrontPhoto" :src="licenseFrontPhoto" class="avatar">
                           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </el-form-item>
                        <el-form-item label="驾照副页照片">
                        <el-upload
                                class="avatar-uploader"
                                action="http://192.168.0.100:80/clms-client/client/upload"
                                :headers= "headers"
                                :show-file-list="false"
                                :on-success="uploadLicenseReversePhoto"
                                :before-upload="beforeAvatarUpload">
                           <img v-if="licenseReversePhoto" :src="licenseReversePhoto" class="avatar">
                           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                      </el-form-item>
                    </el-form>
                </span>
            </el-dialog>

        </el-card>
    </div>
</template>

<script>
    import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
    import qs from 'qs'

    export default {
        name: "showClient",
        data(){
            return {

                options: regionData,
                selectedOptions:[],
                rules:{
                    cardNumber: [
                        { required: true, message: '请输入身份证号', trigger: 'blur' },
                        { min: 18, max: 18, message: '请输入18位身份证号', trigger: 'blur' },
                    ],
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
                        { type: 'number', message: '手机号必须为数字值'}
                    ],
                    password: [
                        { required: true, message: '请输入注册密码', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '请输入注册账号名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                },
                headers: {
                    'Token' : sessionStorage.getItem("token")
                },

                ruleForm:{
                    username:'',
                    password:'',
                    phone:'',
                    address:'',
                    idType:'',
                    cardNumber:'',
                    frontPhoto:'',
                    reversePhoto:'',
                    licenseFrontPhoto:'',
                    licenseReversePhoto:''
                },
                frontPhoto: '',
                reversePhoto:'',
                licenseFrontPhoto:'',
                licenseReversePhoto:'',

                // 证件类型下拉菜单
                option:[
                    {
                        value:1,
                        label:'身份证'
                    },
                    {
                        value:2,
                        label:'护照'
                    },
                    {
                        value:3,
                        label:'台胞证'
                    },
                    {
                        value:4,
                        label:'港澳台来往内地通行证'
                    }
                ],

                // 搜索下拉菜单数据
                selectData:[],
                //条件搜索对象
                userFormData:{
                    username:'',
                    level:'',
                    phone:'',
                    email:''
                },
                //表格数据
                tableData:[],
                pageUtil:{
                    //每页显示的条数
                    pageSize: 5,
                    //当前的显示的页码
                    currentPage:1,
                },
                //总条数
                total:0,
                // 弹出层
                dialogVisible:false
            }
        },
        methods:{

            // 提交表格
            submitForm(formName) {
                this.ruleForm.address = CodeToText[this.selectedOptions[0]]+CodeToText[this.selectedOptions[1]]+CodeToText[this.selectedOptions[2]];
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            method:'put',
                            url:'clms-client/client/updateClient',
                            data:qs.stringify(this.ruleForm)
                        }).then(r=>{
                            if (r.data.code == 200) {
                                this.$message.success(r.data.object);
                                // 刷新表格
                                this.handleCurrentChange(1);
                                this.dialogVisible = false;
                            }else {
                                this.$message.error(r.data.object);
                            }
                        })
                    } else {
                        this.$message.error(r.data.message);
                        return false;
                    }
                });
            },

            // 重置表格
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            insertClient(){
                this.dialogVisible = true;
                this.ruleForm = {};
            },

            // 搜索下拉菜单
            getAll() {
                this.$axios({
                    method:'get',
                    url:'clms-client/level/getAll'
                }).then(r=>{
                    if (r.data.code == 200) {
                        console.log(r.data.listData);
                        this.selectData = r.data.listData;
                    }
                })
            },

            // 改变客户的状态
            changeStaus(row) {
                this.$axios({
                    method:'put',
                    url:'clms-client/client/changeClientStaus',
                    params:{
                        status: row.status,
                        id: row.id
                    }
                }).then(r=>{
                    if (r.data.code == 200) {
                        this.$message.success(r.data.message)
                        // 刷新表格
                        this.getAllClient();
                    }
                })
            },
            // 根据条件查询客户信息
            getAllClient() {
                this.$axios({
                    method:'post',
                    url:'clms-client/client/getAllClient',
                    params:{
                        currentPage: this.pageUtil.currentPage,
                        pageSize: this.pageUtil.pageSize
                    },
                    data:qs.stringify(this.userFormData)
                }).then(r=>{
                    if (r.data.code == 200) {
                        this.tableData = r.data.object.records;
                        this.total = r.data.object.total;
                    }
                })
            },
            // 改变每页显示的条数时触发该方法
            handleSizeChange(val){
                this.pageUtil.pageSize = val;
                this.getAllClient();
            },
            //切换页码时触发该方法
            handleCurrentChange(val){
                this.pageUtil.currentPage = val;
                this.getAllClient();
            },

            // 上传图片成功后的钩子函数
            uploadFrontPhoto(response, file) {
                this.ruleForm.frontPhoto = response;
                this.frontPhoto = URL.createObjectURL(file.raw);
            },
            uploadReversePhoto(response, file) {
                this.ruleForm.reversePhoto = response;
                this.reversePhoto = URL.createObjectURL(file.raw);
            },
            uploadLicenseReversePhoto(response, file) {
                this.ruleForm.licenseReversePhoto = response;
                this.licenseReversePhoto = URL.createObjectURL(file.raw);
            },
            uploadLicenseFrontPhoto(response, file) {
                this.ruleForm.licenseFrontPhoto = response;
                this.licenseFrontPhoto = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }

        },

        // 钩子函数
        created() {
            // 根据条件查询客户信息
            this.getAllClient();
            // 搜索的下拉单
            this.getAll();
        }
    }
</script>

<style >

</style>
